<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="/css/element/index.css" />
  <link rel="stylesheet" href="/lib/qunit/qunit.css" />
  <link rel="stylesheet" href="/themes/default/default.css" />
  <script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/element/index.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/ajax/libs/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/common/js/ms-ui.js" type="text/javascript" charset="utf-8"></script>


  <script src="/lib/qunit/qunit.js"></script>
  <!-- include src files -->
  <script src="/src/core.js"></script>
  <script src="/src/config.js"></script>
  <script src="/src/ajax.js"></script>
  <script src="/src/event.js"></script>
  <script src="/src/html.js"></script>
  <script src="/src/selector.js"></script>
  <script src="/src/node.js"></script>
  <script src="/src/range.js"></script>
  <script src="/src/cmd.js"></script>
  <script src="/src/widget.js"></script>
  <script src="/src/edit.js"></script>
  <script src="/src/toolbar.js"></script>
  <script src="/src/menu.js"></script>
  <script src="/src/colorpicker.js"></script>
  <script src="/src/uploadbutton.js"></script>
  <script src="/src/dialog.js"></script>
  <script src="/src/tabs.js"></script>
  <script src="/src/main.js"></script>
  <script src="/lang/zh-CN.js"></script>
  <script src="/lang/en.js"></script>
  <script src="/plugins/emoticons/emoticons.js"></script>
  <script src="/plugins/flash/flash.js"></script>
  <script src="/plugins/image/image.js"></script>
  <script src="/plugins/link/link.js"></script>
  <script src="/plugins/media/media.js"></script>
  <script src="/plugins/plainpaste/plainpaste.js"></script>
  <script src="/plugins/table/table.js"></script>
  <script src="/plugins/wordpaste/wordpaste.js"></script>
  <script src="/plugins/filemanager/filemanager.js"></script>
  <script src="/plugins/preview/preview.js"></script>
  <script src="/plugins/code/code.js"></script>
  <script src="/plugins/map/map.js"></script>
  <script src="/plugins/lineheight/lineheight.js"></script>
</head>
<style type="text/css">
  [v-cloak] {
    display: none;
  }

  .form_work {
    width: 800px;
    margin: 50px auto;
  }

  .upload-demo {
    margin-left: 80px;
    margin-bottom: 25px;
  }

  .input_ressee,
  .input_cc {
    width: 100%;
    position: relative;
  }

  .ressee,
  .cc {
    position: absolute;
    top: 15px;
    right: 20px;
  }
</style>

<body>
  <div id="app">
    <el-form label-width="80px" class="form_work" :model="formLabelAlign">
      
      <el-form-item label="收件人">
        <el-select v-model="formLabelAlign.addressee" allow-create class="inline-input input_ressee" multiple filterable
          remote reserve-keyword placeholder="" :remote-method="remoteMethod" :loading="loading">
          <el-option v-for="item in restaurant" :key="item.email" :label="item.displayName" :value="item.email">
          </el-option>
        </el-select>
        <i class="el-icon-circle-plus-outline ressee" @click="dialogVisible1 = true"></i>
        <el-dialog title="添加收件人" :visible.sync="dialogVisible1" width="30%">
          <el-input type="text" v-model="search"></el-input>
          <ul>
            <li v-for="(item,index) in items" @click="addRessee(item.displayName,item.email)" v-cloak>
              <span>{{ item.email }}</span>
              <span>{{ item.displayName }}</span>
            </li>
          </ul>
        </el-dialog>
      </el-form-item>
      <el-form-item label="抄送">
        <el-select v-model="formLabelAlign.cc" allow-create class="inline-input input_cc" multiple filterable remote
          reserve-keyword placeholder="" :remote-method="remoteMethod" :loading="loading">
          <el-option v-for="item in restaurant" :key="item.email" :label="item.displayName" :value="item.email">
          </el-option>
        </el-select>
        <i class="el-icon-circle-plus-outline cc" @click="dialogVisible2 = true"></i>
        <el-dialog title="添加收件人" :visible.sync="dialogVisible2" width="30%">
          <el-input type="text" v-model="search"></el-input>
          <ul>
            <li v-for="(item,index) in items" @click="addCC(item.displayName,item.email)" v-cloak>
              <span>{{ item.email }}</span>
              <span>{{ item.displayName }}</span>
            </li>
          </ul>
        </el-dialog>
      </el-form-item>
      <el-form-item label="邮件主题">
        <el-input v-model="formLabelAlign.mail_subject"></el-input>
      </el-form-item>


      <el-form-item label="邮件正文">
        <textarea id="mail_content" name="content" style="width:700px;height:300px;">
</textarea>
        <!-- <el-input type="textarea" :rows="4" placeholder="" v-model="formLabelAlign.mail_text"></el-input> -->
      </el-form-item>
      
     
      
      <el-upload class="upload-demo" ref="upload" action="" :on-preview="handlePreview" :on-change="handleChange"
        :on-remove="handleRemove" :file-list="addFile" :auto-upload="false" v-cloak>
        <el-button slot="trigger" size="small" type="primary">添加附件</el-button>
      </el-upload>
      <el-button type="primary" @click="send" v-cloak>发送</el-button>
      <el-button @click="closeWindow" v-cloak>取消</el-button>
    </el-form>
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data: {
      dialogVisible1: false,
      dialogVisible2: false,
      formLabelAlign: {
        workId: '',
        addressee: [],
        cc: [],
        mail_subject: "",
        mail_text: "",
      },
      toAddress: "",
      ccAddress: "",
      addFile: [],    
      restaurant: [],
      loading: false,
      restaurants: [],
      search: "",
      param: {},
      slice: ''
    },
    computed: {
      //过滤方法
      items: function () {
        var _search = this.search;
        if (_search) {
          //不区分大小写处理
          var reg = new RegExp(_search, "ig");
          //es6 filter过滤匹配，有则返回当前，无则返回所有
          return this.restaurants.filter(function (e) {
            //匹配所有字段
            return Object.keys(e).some(function (key) {
              return e[key].match(reg);
            });
            //匹配某个字段
            //  return e.name.match(reg);
          });
        }
        return this.restaurants;
      }
    },

    methods: {
      getAllUser() {
        axios
          .get("/xman/etlMail/contactList")
          .then(response => {
            // console.log("getAllUser", response);
            this.restaurants = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      handleRemove(file, addFile) {
        console.log(file, addFile);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleChange(file, addFile) {
        this.addFile.push(file.raw);
        console.log(file);
      },
      remoteMethod(query) {
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.restaurant = this.restaurants.filter(item => {
              return (
                item.displayName.toLowerCase().indexOf(query.toLowerCase()) >
                -1
              );
            });
          }, 200);
        } else {
          this.restaurant = [];
        }
      },
      addRessee(displayName, email) {
        this.formLabelAlign.addressee.push(email);
        this.formLabelAlign.addressee = this.removal(
          this.formLabelAlign.addressee
        );
        this.dialogVisible1 = false;
      },
      addCC(displayName, email) {
        this.formLabelAlign.cc.push(email);
        this.formLabelAlign.cc = this.removal(this.formLabelAlign.cc);
        this.dialogVisible2 = false;
      },

      closeWindow() {
        var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
        parent.layer.close(index); //关闭窗口
      },
      send() {
        const loading = this.$loading({
          lock: true,
          text: '请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.formLabelAlign.mail_text = editor1.html();
        if (this.formLabelAlign.addressee.length == 0) {
          this.$message({
            type: "warning",
            message: "请填写正确的邮箱!"
          });
          setTimeout(() => {
            loading.close();
          }, 1000);
        } else if (this.formLabelAlign.mail_subject == "") {
          this.$message({
            type: "warning",
            message: "请填写邮件主题!"
          });
          setTimeout(() => {
            loading.close();
          }, 1000);

        } else {
          for (let i = 0; i < this.formLabelAlign.addressee.length; i++) {
            const ressee = this.formLabelAlign.addressee[i];
            this.toAddress = this.toAddress + ressee + ";";
          }
          for (let i = 0; i < this.formLabelAlign.cc.length; i++) {
            const
              ressee = this.formLabelAlign.cc[i];
            this.ccAddress = this.ccAddress + ressee + ";";
          }
          var param = new FormData();

          
          
          for (let i = 0; i < this.addFile.length; i++) {
            const fileIndex = this.addFile[i];
            param.append("files", fileIndex);
          }
          
          param.append("toAddress",
            this.toAddress);
          param.append("ccAddress", this.ccAddress);
          param.append("subject",
            this.formLabelAlign.mail_subject);
          param.append("mailBody", this.formLabelAlign.mail_text);
          param.append("status", 1);
          axios
            .post("/xman/etlMail/add", param)
            .then(response => {

              if (response.data.code == 500) {

                this.formLabelAlign.addressee = []
                this.toAddress = ""
                this.formLabelAlign.cc = []
                this.ccAddress = ""

                this.$message({
                  type: "error",
                  message: "发送失败!请填写正确的邮箱地址！"
                });
                setTimeout(() => {
                  loading.close();
                }, 1000);

              } else {
                this.$message({
                  type: "success",
                  message: "发送成功!"
                });
                setTimeout(() => {
                  loading.close();
                  this.closeWindow();
                  window.parent.location.reload();
                }, 1000);
              }

            })
            .catch(function (error) {
              console.log(error);
            });
        }

      },

      removal(array) {
        var temp = []; //一个新的临时数组
        for (var i = 0; i < array.length; i++) {
          if (temp.indexOf(array[i]) == -1) {
            temp.push(array[i]);
          }
        }
        return temp;
      }
    },
    created() {
      this.getAllUser();
    }
  });
</script>
<script>
  KindEditor.ready(function (K) {
    window.editor1 = K.create('#mail_content');
  });
  KindEditor.ready(function (K) {
    window.editor2 = K.create('#script_use');
  });
  KindEditor.ready(function (K) {
    window.editor3 = K.create('#script_content');
  });
</script>

</html>